<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ticking vs. Smooth Clocks (CSS-Only)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        
        <div class="black-clock">
            <div class="number" style="--n: 1;"><b>1</b></div>
            <div class="number" style="--n: 2;"><b>2</b></div>
            <div class="number" style="--n: 3;"><b>3</b></div>
            <div class="number" style="--n: 4;"><b>4</b></div>
            <div class="number" style="--n: 5;"><b>5</b></div>
            <div class="number" style="--n: 6;"><b>6</b></div>
            <div class="number" style="--n: 7;"><b>7</b></div>
            <div class="number" style="--n: 8;"><b>8</b></div>
            <div class="number" style="--n: 9;"><b>9</b></div>
            <div class="number" style="--n: 10;"><b>10</b></div>
            <div class="number" style="--n: 11;"><b>11</b></div>
            <div class="number" style="--n: 12;"><b>12</b></div>
            <div class="center-dot"></div>
            <div class="hand hour"></div>
            <div class="hand minute"></div>
            <div class="hand second"></div>
        </div>

        <div class="white-clock">
            <div class="number" style="--n:1"><b>1</b></div>
            <div class="number" style="--n:2"><b>2</b></div>
            <div class="number" style="--n:3"><b>3</b></div>
            <div class="number" style="--n:4"><b>4</b></div>
            <div class="number" style="--n:5"><b>5</b></div>
            <div class="number" style="--n:6"><b>6</b></div>
            <div class="number" style="--n:7"><b>7</b></div>
            <div class="number" style="--n:8"><b>8</b></div>
            <div class="number" style="--n:9"><b>9</b></div>
            <div class="number" style="--n:10"><b>10</b></div>
            <div class="number" style="--n:11"><b>11</b></div>
            <div class="number" style="--n:12"><b>12</b></div>
            <div class="center-dot"></div>
            <div class="hand hour"></div>
            <div class="hand minute"></div>
            <div class="hand second"></div>
        </div>

    </div>

</body>
</html>